<template>
  <section class="hover-box-out">
    <div class="container">
      <ul class="hover-box-inner">
        <!-- 热门彩区域 -->
        <li class="hot-area area-public-style">
          <div class="hot-lottery-title title-public">
            <div class="title-icon">
              <img :src="hotArrinfor.url" alt="">
            </div>
            <div class="title-content">{{hotArrinfor.title}}</div>
          </div>
          <div class="list-item-public">
            <div style="display:flex">
            <ul class="content-ul-public" v-for="item in hotArr">
              <li class="content-li-public" v-for="ele in item">
                <img :src="ele.src" alt="">
                <span @click="chooseCaizhong(ele.id,ele.type_identification,ele.article_id)">{{ele.name}}</span>
              </li>
            </ul>
            </div>
          </div>
        </li>
        <!-- 高频彩区域 -->
        <li class="high-area area-public-style">
          <div class="high-lottery-title title-public">
            <div class="title-icon">
              <img :src="highArrinfor.url" alt="">
            </div>
            <div class="title-content">{{highArrinfor.title}}</div>
          </div>
          <div class="list-item-public">
            <div style="display:flex">
            <ul class="content-ul-public"  v-for="item in highArr">
              <li class="content-li-public high-low-li" v-for="(elem,i) in item">
                <span @click="chooseCaizhong(elem.id,elem.type_identification,elem.article_id)">{{elem.name}}</span>
              </li>
            </ul>
            </div>
          </div>
        </li>
        <!-- 低频彩区域-->
        <li class="low-area area-public-style">
          <div class="low-lottery-title title-public">
            <div class="title-icon">
              <img :src="lowArrinfor.url" alt="">
            </div>
            <div class="title-content">{{lowArrinfor.title}}</div>
          </div>
          <div class="list-item-public">
            <div style="display:flex">
            <ul class="content-ul-public" v-for="item in lowArr">
              <li class="content-li-public high-low-li" v-for="(elem,i) in item">
                <span @click="chooseCaizhong(elem.id,elem.type_identification,elem.article_id)">{{elem.name}}</span>
              </li>
            </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      hotArr: {},
      highArr: {},
      lowArr: {},
      hotArrinfor:{}, //热门彩logo、title数据
      highArrinfor:{},  //高频彩logo、title数据
      lowArrinfor:{},  //低频彩logo、title数据
    }; 
  },
  mounted() {
    this.axios
      .get("index/getObtainTopLotteryByIdLimit")
      .then(res => {
        if (res.data.status) {
          this.hotArrinfor = res.data.data[0];
          this.hotArr = this.getData(this.hotArrinfor,3)
          this.highArrinfor = res.data.data[1];
          this.highArr = this.getData(this.highArrinfor,4)
          this.lowArrinfor = res.data.data[2];
          this.lowArr = this.getData(this.lowArrinfor,4)
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
  },
  methods:{
    chooseCaizhong(czID,czType,czarticleID){
      this.$emit("chooseLotteryFuc",czID);
      this.$store.commit("getLotteryType",czType);   
      this.$store.commit("getLotteryTypeArticleID",czarticleID);   
    },
    // 获取并处理彩种类型信息数据
    getData(val,num){
      let newarr = [];
      let len = val.details.length
      for(var i=0;i<len;i+=num){
          newarr.push(val.details.slice(i,i+num));
      }
      return newarr;
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../assets/css/tabshoversection.less);
</style>


